<script setup lang="ts">
import { useAppStore, usePermissionStore, useTagStore } from '@/store'
import { RouteLocationNormalized, useRoute, useRouter } from 'vue-router'
import Icon from '@/components/Icon/index.vue'
import { set } from '@vueuse/core'
import SubMenu from './sub-menu.vue'

const permissionStore = usePermissionStore()
const accessRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta.hidden))
const appStore = useAppStore()
const tagStore = useTagStore()
const router = useRouter()
const route = useRoute()
const openKeys = ref<string>('')
const selectedKeys = ref<string>('')

const selectBreadcrumb = (routes: any) => routes.map(({ path, meta: { title } }: any) => ({ title, path }))
const setMenuKeys = (r: RouteLocationNormalized) => {
  set(openKeys, r.matched.length >= 2 ? r.matched.slice(-2, -1)[0].path : '')
  set(selectedKeys, r.path)

  const currentMenu = selectBreadcrumb(r.matched)
  const tag = r.matched.slice(-1)[0]

  appStore.setBreadcrumbList(currentMenu)
  tagStore.addTag({ title: tag.meta.title, path: tag.path })
}

const onMenuClick = (key: string) => {
  router.push(key)
}

watch(() => route, setMenuKeys, {
  immediate: true,
  deep: true,
})
</script>
<template>
  <a-layout-sider class="app-sider" theme="dark" :collapsed="appStore.collapsed">
    <div class="app-logo">
      <div class="logo-wrap">
        <img src="@/assets/logo.svg" class="app-logo-img" alt="Nest-Vue-Admin" />
        <span class="title">Nest-Vue-Admin</span>
      </div>
    </div>
    <a-menu :default-open-keys="[openKeys]" :auto-open-selected="true" :selected-keys="[selectedKeys]" @menu-item-click="onMenuClick">
      <template v-for="nav in accessRoutes" :key="nav.path">
        <template v-if="nav?.children?.length === 1">
          <a-menu-item :key="nav.path" :title="nav.children[0].meta?.title">
            <Icon :type="nav.children[0].meta?.icon" />
            <span>{{ nav.children[0].meta?.title }}</span>
          </a-menu-item>
        </template>
        <template v-else>
          <a-menu-item v-if="!nav.children" :key="nav.path" :path="nav.path" :title="nav.meta.title">
            <Icon :type="nav.meta.icon" />
            <span class="name">{{ nav.meta.title }} </span>
          </a-menu-item>
          <SubMenu v-else :nav="nav" />
        </template>
      </template>
    </a-menu>
  </a-layout-sider>
</template>
